<template>
    <div class="app-login">
        <el-card class="login-box">
            <template v-slot:header>
                <div class="clearfix">
                    <span>用户登录</span>
                </div>
            </template>
            <template>
                <el-form :model="form" status-icon :rules="rules" ref="loginForm" label-width="100px" class="login">
                    <el-form-item label="用户名" prop="user">
                        <el-input type="text" v-model="form.user" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="pwd">
                        <el-input type="text" v-model="form.pwd" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="repwd">
                        <el-input type="text" v-model="form.repwd"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('loginForm')">提交</el-button>
                        <el-button @click="resetForm('loginForm')">重置</el-button>
                    </el-form-item>
                </el-form>
            </template>
        </el-card>
</div>
</template>

<script>



import { mapActions } from "vuex";
import _ from "lodash";

export default {
    name: "LoginView",
    data() {

        // rule  当前验证的规则(对象)
        // value  被验证的表单控件(input textarea)的值
        // callback  回调函数 -> 调用此回调函数返回错误的信息(错误对象/文本)
        let judgeUser = (rule, value, callback) => {
            // console.log(rule,value,callback);

            var reg = /^[a-zA-Z]\w{4,11}$/;
            if (!value) {
                // callback(new Error('请输入用户名'));  
                callback('请输入用户名');
            } else if (value.length < 5 || value.length > 12) {
                callback('用户名需要在5-12之间');
            } else if (!reg.test(value)) {
                callback('用户名由数字,字母,下划线组成');
            } else {
                callback();
            }
        }

        let judgePwd = (rule, value, callback) => {
            // console.log(rule,value,callback);
            this.isPwdOk = false;
            var reg = /^\w{4,12}$/;
            if (!value) {
                // callback(new Error('请输入用户名'));  
                callback('请输入密码');
            } else if (value.length < 5 || value.length > 12) {
                callback('密码需要在5-12之间');
            } else if (!reg.test(value)) {
                callback('密码由数字,字母,下划线组成');
            } else {
                this.isPwdOk = true;
                callback();

                // 每次密码格式正确,需要重新确认密码(repwd)
                if (this.form.repwd) {
                    this.$refs.loginForm.validateField("repwd")
                }
            }
        }

        let judgeRepwd = (rule, value, callback) => {

            // 密码有值,且有问题
            if (this.form.pwd && !this.isPwdOk) {
                callback('密码格式有误,请先修改密码');
            } else if (!value) {
                // callback(new Error('请输入用户名'));  
                callback('请再次输入密码');
            } else if (this.form.pwd !== this.form.repwd) {
                callback('两次密码输入不一致');
            } else {
                callback();
            }
        }



        return {
            isPwdOk: false,
            form: {
                user: "admin",
                pwd: "123456",
                repwd: "123456",
            },
            rules: {  // 对象 -> 验证的字段可能有多个
                // user:[],   // 数组 => 存放验证的规则,验证的规则可能不止一个 (一个规则就是一个对象)
                user: [
                    // { type:'string',required: true, message: '请输入用户名', trigger: 'blur' },
                    // { min:5,max:12, message: '用户名需要在5-12之间', trigger: 'blur' },
                    // { pattern:/^[a-zA-Z]\w{4,11}$/, message: '用户名由数字,字母,下划线组成', trigger: 'blur' },

                    { validator: judgeUser, trigger: 'blur' }
                ],
                pwd: [
                    { validator: judgePwd, trigger: 'blur' }
                ],
                repwd: [
                    { validator: judgeRepwd, trigger: 'blur' }
                ],
            }
        }
    },
    methods: {
        ...mapActions("authority", ["loginAndUpdateAuthority"]),

        loginHandler:_.debounce(async function() {
            try {
                // 验证成功 => 去登录
                await this.loginAndUpdateAuthority({
                    adminname: this.form.user,
                    password: this.form.pwd,
                })

                this.$message({
                    type: "success",
                    message: "登录成功",
                    duration: 1000,
                });
                // this.$message.success("登录成功");

                // 登录成功时判断是否有returnURL 
                // 有=>从其他页面调过来,登录成功,调回去
                // 没有 => 直接进主页

                

                if (this.$route.query.ReturnURL) {
                    var ReturnURL = this.$route.query.ReturnURL;
                    this.$router.replace(ReturnURL)
                } else {
                    this.$router.replace("/")
                }



            } catch (err) {
                console.log("err", err);
            }
        },300),
        async submitForm(formName) {
            console.log(formName);
            // 除了失焦时要验证用户名/密码, 在数据提交之前,也需要在验证一次
            // this.$refs.loginForm.validate()
            // this.$refs[formName].validate()   // 验证表单(组件) => 如何知道验证的结果

            // 1. this.$refs[formName].validate() 可以接收一个回调函数,回调函数有一个形参可以接收验证的结果
            // this.$refs[formName].validate((valid)=>{
            //     console.log(valid);   // true|false
            // }) 

            // 2.  this.$refs[formName].validate() 不接收回调函数 默认返回一个Promise实例(存储有验证的结果 => 验证成功Promise实例就变为已成功  验证失败 => Promise的实例就变为已失败)
            // var res =  this.$refs[formName].validate()
            // console.log(res);  

            try {
                await this.$refs[formName].validate();

                // try{
                //     // 验证成功 => 去登录
                //     var res = await LoginPostAPI({
                //         adminname:this.form.user,
                //         password:this.form.pwd,
                //     })
                //     var {code,message} = res;
                //     if(code == 200){
                //         this.$message.success(message)
                //     }else{
                //         throw new Error(message);
                //     }
                // }catch(err){
                //     console.log("err",err);
                //     this.$message.error(err.message)
                // }

                // try{
                //     // 验证成功 => 去登录
                //     await LoginPostAPI({
                //         adminname:this.form.user,
                //         password:this.form.pwd,
                //     })

                //     this.$message.success("登录成功")

                // }catch(err){
                //     console.log("err",err);
                //     this.$message.error(err.message)
                // }


                // try{
                //     // 验证成功 => 去登录
                //     await LoginPostAPI({
                //         adminname:this.form.user,
                //         password:this.form.pwd,
                //     })

                //     this.$message.success("登录成功")

                // }catch(err){
                //     console.log("err",err);
                // }


                this.loginHandler()


            } catch (err) {
                // 验证失败 => 
                // this.$message({
                //     message:"请传入正确格式的数据",
                //     type:"error",
                // })
                this.$message.error("请传入正确格式的数据")
            }



        },
        resetForm(formName) {
            this.$refs[formName].resetFields()
        }
    }
}
</script>

<style lang="scss" scoped>
.app-login {
    width: 100%;
    height: 100%;
}

.login-box {
    width: 450px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
</style>